<template>
  <contentModel
    v-if="detailShow"
    :title="'查看任务日志'"
    :has-footer="false"
    @close="handleClose"
  >
    <query-page
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      height="calc(100vh - 244px)"
      :total="total"
      @query-data="getData"
    >
    </query-page>
  </contentModel>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref, defineAsyncComponent } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import { getTaskPage } from '@/api/balance-management/purchase';
  import {
    formComponentConfig,
    formRenderConfig,
  } from '../form-comp/detail-search-form';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../table-comp/detail-table';

  defineProps({
    detailShow: { type: Boolean, default: false },
  });
  const total = ref(0);
  const emit = defineEmits(['update:detailShow']);
  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const handleClose = () => {
    emit('update:detailShow', false);
  };
  const formRenderKeys = [
    'taskCode',
    'status',
    'kaishikai',
    'kaishizhi',
    'endkai',
    'endend',
    'tenantId',
  ];
  const tableRenderKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const selectedKeys = ref(['id-1']);

  const getData = async (queryInfo) => {
    renderData.value = [];
    isLoading.value = true;
    console.log('queryInfo', queryInfo);
    const res = (await getTaskPage(queryInfo)) as any;

    if (res.code === 200) {
      total.value = res.data.total;
      renderData.value = res.data.list;
    }
    isLoading.value = false;
  };
</script>

<style lang="less" scoped>
  .base-component {
    color: red;
  }
</style>
